<template>
  <view>
    <!-- 占位元素 -->
    <view
      v-if="fixed && placeholder"
      :style="{ height: `${height}rpx` }"
    ></view>
    
    <view 
      class="fu-tabbar"
      :class="{ 'fu-tabbar--fixed': fixed }"
    >
      <view 
        class="fu-tabbar__content"
        :class="{ 'fu-tabbar--safe': safeAreaInsetBottom }"
      >
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * fu-tabbar 标签栏组件
 * @description 用于展示底部标签栏
 * @property {Boolean} fixed - 是否固定在底部
 * @property {Boolean} placeholder - 固定在底部时是否生成占位元素
 * @property {Boolean} safeAreaInsetBottom - 是否开启底部安全区适配
 */
export default {
  name: 'fu-tabbar',
  props: {
    fixed: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: Boolean,
      default: true
    },
    safeAreaInsetBottom: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      height: 100 // tabbar高度，单位rpx
    }
  },
  provide() {
    return {
      tabbar: this
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-tabbar {
  z-index: 100;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  &--fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
  
  &__content {
    display: flex;
    align-items: center;
    height: 100rpx;
  }
  
  &--safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style> 